<template>
	<view class="confirm-pwd">
		<view class="form">
			<view class="item">
				<view class="label"> 密码 </view>
				<view class="value">
					<input v-model="password" type="safe-password" placeholder="请输入密码" />
				</view>
			</view>
			<view class="tips" v-if="isTips"> {{password.length==0?'请输入密码，密码不能为空':'至少8个字符，不能全是字母或数字'}} </view>
			<view class="item item-yes" v-if="pageType == 2">
				<view class="label"> 确认密码 </view>
				<view class="value">
					<input v-model="confirmPassword" type="safe-password" placeholder="请再次输入密码" />
				</view>
			</view>
			<view class="tips" v-if="isTipsT"> {{password.length==0?'请再次输入密码，确认密码不能为空':'至少8个字符，不能全是字母或数字'}} </view>
			<view class="btn" @tap="confirmRegister">
				{{ pageType == 1 ? '确认注册' : '确认更改' }}
			</view>
		</view>
		<uni-popup ref="popupRef" type="center" :isMaskClick="false">
			<view class="popup-box">
				<view class="popup">
					<image src="/static/icon/login/regSeuuess.png" class="p-img"/>
					<view class="title"> {{ pageType == 1 ? '注册成功' : '重置成功' }} </view>
					<view class="tips"> 
						<view class="tips-title"> 请稍等... </view>
						<view class="tips-text"> 
							<uni-countdown color="#FF3B1E" :second="5" :font-size="12"
								:showDay="false" :showHour="false" :showMinute="false" @timeup="popupTimeUp" /> 
							<text>s</text>将自动跳转至{{ pageType == 1 ? '首页' : '登录页' }} 
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { isValidIdPwd } from '@/utils/valdate.js'
	import { useUserStore, useCommStore } from '@/store/index.js'
	import { RegisterApi, ForgetPWDApi } from '@/service/index.js'
	const props = defineProps(['pageType', 'phone', 'code'])
	const popupRef = ref()
	const password = ref('')
	const confirmPassword = ref('')
	const isTips = ref(false)
	const isTipsT = ref(false)
	// 确认注册 or 确认更改
	const confirmRegister = () => {
		if (props.pageType == 1) {
			register()
		} else {
			forgePwd()
		}
	}
	const register = () => {
		const { SETMEMBER } = useUserStore()
		const { SETCOMM } = useCommStore()
		if (isValidIdPwd(password.value)) {
			isTips.value = false
			let params = {
				mobile: props.phone,
				code: props.code,
				loginpass: password.value
			}
			RegisterApi(params).then(res => {
				SETMEMBER(res)
				SETCOMM()
				popupRef.value.open()
			})
		} else {
			isTips.value = true
		}
	}
	const forgePwd = () => {
		if(!isValidIdPwd(password.value)) return isTips.value = true
		if(!isValidIdPwd(confirmPassword.value)) return isTipsT.value = true
		let params = {
			mobile: props.phone,
			code: props.code,
			loginpass: password.value,
			loginpass_yes: confirmPassword.value
		}
		ForgetPWDApi(params).then(res => {
			isTips.value = false
			isTipsT.value = false
			popupRef.value.open()
			// uni.redirectTo({url: '/pages/login/login'})
		})
	}
	const popupTimeUp = () => {
		if (props.pageType == 1) {
			uni.switchTab({
				url: '/pages/index/index'
			})
		} else {
			uni.navigateBack()
		}
	}
</script>

<style lang="scss" scoped>
	.confirm-pwd {
		.form {
			.item {
				margin-top: 50px;
				.label {
					color: #333333;
					font-size: 16px;
					font-weight: 400;
					line-height: 14px;
				}
				.value {
					margin-top: 11px;
					padding: 11px 0;
					border-bottom: 1px solid #eeeeee;
					input {
						color: #BBBBBB;
						font-size: 14px;
						font-weight: 400;
						line-height: 14px;
					}
				}
			}
			.item-yes {
				margin-top: 19px;
			}
			.tips {
				color: #FF3B1E;
				font-size: 14px;
				margin-top: 19px;
				font-weight: 400;
				line-height: 14px;
			}
			.btn {
				height: 50px;
				color: #FFFFFF;
				font-size: 17px;
				font-weight: 500;
				margin-top: 50px;
				line-height: 50px;
				text-align: center;
				background: #FF3B1E;
				border-radius: 106px;
			}
		}
		.popup-box {
			background-color: #ffffff;
			border-radius: 10px;
			width: 280px;
			height: 300px;
			overflow: hidden;
			.popup {
				text-align: center;
				background: linear-gradient( 180deg, #FFEFED 0%, rgba(255,248,244,0.6) 70%, #FFFFFF 98%);
				.p-img {
					width: 108px;
					height: 108px;
					margin-top: 40px;
				}
				.title {
					color: #333333;
					font-size: 18px;
					font-weight: 500;
					margin-top: 27px;
					line-height: 14px;
				}
				.tips {
					margin-top: 32px;
					.tips-title {
						color: #999999;
						font-size: 14px;
						font-weight: 400;
						line-height: 14px;
					}
					.tips-text {
						display: flex;
						align-items: center;
						justify-content: center;
						color: #999999;
						font-size: 14px;
						font-weight: 400;
						margin-top: 12px;
						line-height: 14px;
						text {
							color: #FF3B1E;
						}
					}
				}
			}
		}
	}
</style>